import React, { memo, useEffect, useRef } from 'react';
import ReactEcharts from 'echarts-for-react';

import { numberFormat } from '@/utils/formatterUtil';

const seriesTypeMap = {
    line: {
        type: 'line',
        symbol: 'circle',
        symbolSize: 6
    },
    bar: {
        type: 'bar',
        barMaxWidth: 50,
        barMinHeight: 1,
        barGap: '20%',
        label: {
            verticalAlign: 'middle'
        },
        itemStyle: {
            normal: {
                barBorderRadius: [2, 2, 0, 0]
            }
        },
        barCategoryGap: '30%'
    }
};

const ItemChart = props => {
    const { chartData, chartType, chartName } = props;

    const chartRef = useRef(null);
    //  图表最终数据整合
    const seriesData = () => {
        const data = [];
        chartData.forEach(({ dataDetailTypeName, targetMonthAmountVO }) => {
            const seriesItemData = {
                ...seriesTypeMap[chartType],
                name: dataDetailTypeName,
                data: targetMonthAmountVO.map(item => item.amount)
            };
            data.push(seriesItemData);
        });
        return data;
    };

    const colorList = [
        '#5590F6',
        '#FFA22D',
        '#44C69D',
        '#FF7760',
        '#FFC367',
        '#5793F3',
        '#DA9CFF',
        '#27727B',
        '#5D84FF',
        '#C1232B',
        '#B5C334',
        '#FCCE10',
        '#E87C25',
        '#FE8463',
        '#9BCA63',
        '#FAD860',
        '#F3A43B',
        '#60C0DD'
    ];

    const getOption = () => ({
        title: {
            text: chartName,
            textStyle: {
                color: 'rgba(0, 0, 0, 0.85)',
                fontSize: 14,
                lineHeight: 28
            }
        },
        color: colorList,
        tooltip: {
            backgroundColor: '#fff',
            padding: 8,
            extraCssText: 'box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12)',
            formatter: (...arg) => {
                const value = numberFormat(arg[0].value, '');
                return `<span style='font-size: 12px;color: ${arg[0].color}'>${arg[0].seriesName}</span><br/><span style="font-size: 18px;color: rgba(0, 0, 0, 0.65);">${value}</span><span style="font-size: 12px; color: rgba(0, 0, 0, 0.3);"> 元</span>`;
            }
        },
        legend: {
            top: 16,
            right: 60,
            itemWidth: 6,
            itemHeight: 6,
            selectedMode: true,
            borderWidth: 0,
            icon: 'circle',
            data: chartData.map(item => item.dataDetailTypeName)
        },
        grid: {
            left: '1%',
            right: '2.5%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: chartType === 'bar',
            axisLine: {
                lineStyle: {
                    color: '#ededed'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.45)'
                },
                margin: 20
            },
            axisTick: {
                show: true,
                length: 12,
                lineStyle: {
                    color: '#ededed'
                }
            },
            data: chartData?.[0]?.targetMonthAmountVO.map(
                item => `${item.year}-${item.month < 10 ? '0' : ''}${item.month}`
            )
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(0, 0, 0, 0.45)'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#ededed'
                }
            }
        },
        series: seriesData()
    });

    useEffect(() => {
        chartRef.current.getEchartsInstance().clear();
        chartRef.current.getEchartsInstance().setOption(getOption());
    }, [chartData]);

    return <ReactEcharts ref={chartRef} option={getOption()} height={500} />;
};

export default memo(ItemChart);
